<template>
	<div class="thePage">
		<van-cell-group>
			<!-- 输入用户 -->
			<van-field v-model="loginForm.name" label="用户" />

			<!-- 输入密码 -->
			<van-field v-model="loginForm.password" type="password" label="密码" />
			<van-button type="primary" block @click="onClickLogin">登录</van-button>
		</van-cell-group>
		<div class="goto">
			<van-button @click="onRegister">如果没有账号，点击前往注册</van-button>
		</div>
	</div>
</template>

<script>
	import { showToast } from 'vant';
	import { loginAPI } from "@/api/user.js";
	import { getUserLocal, setUserLocal, setTokenLocal } from "@/utils/auth.js";
	export default {
		data() {
			return {
				loginForm: {
					name: "", //为了方便
					password: "123456",
				}
			}
		},
		mounted() {
			// 初始显示本地存储保存的用户名
			this.loginForm.name = getUserLocal().name
		},
		methods: {
			onClickLogin() {
				//实现登录逻辑
				if (this.loginForm.name === "" || this.loginForm.password === "") {
					showToast("账号或密码不能为空");
					return;
				}
				// 准备参数
				let params = {
					name: this.loginForm.name,
					password: this.loginForm.password,
				}
				loginAPI(params).then(result => {
					//提示 登录成功
					showToast("登录成功");
					console.log(result)
					//登录成功后要把登录用户的信息保存在本地 ！！！！！
					// 为什么要在前端保存
					// 用户的 token 建议保存在 会话存储 中  sessionStorage
					setTokenLocal(result.data.token)

					// 用户的id name 这样的数据建议保存在 本地存储中 localStorage
					setUserLocal(result.data.user)
					// 用户的密码 不建议保存					

					//登录成功后跳转到需要重定向的路径，默认是我的页面（user）
					console.log(this.$route.query.redirect)
					let toPath = this.$route.query.redirect || "user";
					this.$router.replace({ path: toPath });
				})
			},

			onRegister() {
				//跳转到注册页面
				this.$router.push({ name: "register" });
			}
		}
	}
</script>

<style lang="less" scoped>
	.thePage {
		padding: 60px 10px 10px 10px;
		background-color: white;
	}

	.goto {
		display: block;
		margin-top: 25px;
		text-align: center;
	}
</style>